<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style type="text/css">
			/*steps(6,start/end); 	控制动画在时间片段内产生跳跃,适用于动画间隔固定的时间轴;
			第一个参数表示将时间轴等分为若干份,第二个参数表示动画产生跳跃是在时间片段的起始帧(start)或者结尾帧(end).
			
			step-start : 控制动画在时间片段的起始帧位置发生跳跃
			step-end : 控制动画在时间片段的结尾帧位置发生跳跃*/
			
			
			@keyframes girl{
				0{}
				/*16.66%{background-position: -180px 0;}
				33.33%{background-position: -360px 0;}
				50.00%{background-position: -540px 0;}
				66.66%{background-position: -720px 0;}
				83.33%{background-position: -900px 0;}*/
				100%{background-position: -1080px 0;}
			}
			.window{
				width: 180px;
				height: 300px;
				border: 1px solid black;
				background-image: url(img/girl.png);
				/*animation: girl 1s infinite step-end;*/ /*一种*/
				animation: girl 1s infinite steps(6,end); /*第二种*/
			}
		</style>
		<div class="window"></div>
	</body>
</html>
